const path = require('path')

const htmlWebpackPlugin = require('html-webpack-plugin')

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports={
    entry:path.join(__dirname,'./src/main.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'build.js'
    },
    plugins:[
        new htmlWebpackPlugin({
            template:path.join(__dirname,'./src/index.html'),
            filename:'index.html'
        }),

        new VueLoaderPlugin()
    ],
    module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']},
            {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
            {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
            {test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=65451&name=[hash:8]-[name].[ext]'},
            {test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                  loader: 'babel-loader',
                  options: {
                    presets: ['@babel/preset-env'],
                    plugins: ['@babel/plugin-transform-runtime','@babel/plugin-proposal-class-properties']
                  }
                }
              },
            {test:/\.vue$/,use:'vue-loader'}
        ]
    },
    resolve:{
        alias:{
            'vue$':'vue/dist/vue.js'
        }
    }
}


//使用webpack-dev-server工具实现自动打包编译的功能
//1、运行npm i webpack-dev-server -D把工具安装到项目本地开发依赖，用法和webpack一样
//2、由于本地安装，无法直接在powershell直接运行，只有安装在全局 -g的工具,才能在终端运行
//3、在package.json中的script中添加 "dev":"webpack-dev-server" 然后再终端输入npm run dev
//如果想要正常运行，在本地项目必须安装


//html-webpack-plugin工具有两个作用：
//1、自动在内存中根据指定页面生成一个内存的页面
//2、自动把打包好的build.js追加得到页面中
//需要借助html-webpack-plugin工具；命令为npm install --save-dev html-webpack-plugin


// 要解析vue文件 要npm i vue-loader vue-template-compiler -D
//还要再修改webpack.config.js
//const VueLoaderPlugin = require('vue-loader/lib/plugin')
//在plugins中 添加 new VueLoaderPlugin()